<template>
  <div id="app">
    <!-- 弹窗组件 -->
    <div v-if="showModal">
      <!-- 弹窗内容 -->
      <div class="modal-content">
        <!-- 弹窗提示信息 -->
        <p>您的登录信息无效，请通过易班授权访问。</p>
      </div>
    </div>
    <!-- 遮罩层，覆盖整个页面，阻止用户交互 -->
    <div v-if="showModal" class="modal-overlay"></div>
    <header>
      <!-- 导航栏 -->
      <nav>
        <router-link to="/" class="home-link"
          ><div class="logo">家校互通</div></router-link
        >
        <ul>
          <li><router-link to="/communication">家校沟通</router-link></li>
          <li><router-link to="/score-query">成绩查询</router-link></li>
          <li><router-link to="/contact-info">联系信息</router-link></li>
        </ul>
        <div class="login-user">
          <span>欢迎您,</span>
          <span>{{ user.ybUserName }}</span>
        </div>
      </nav>
    </header>
    <router-view />

    <footer>
      <p>版权所有 © 家校互通管理系统</p>
      <p>隐私政策 | 使用条款</p>
    </footer>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "HomePage",
  data() {
    return {
      showModal: false, // 控制是否显示弹窗
    };
  },
  methods: {},
  created() {
    // sessionStorage.setItem(
    //   "user",
    //   JSON.stringify({ username: "userliu", userid: "123" })
    // );
    // console.log(sessionStorage.getItem("user"));
    const token = this.$route.query.token;
    const userid = this.$route.query.userid;
    this.$store.dispatch("getUser", userid);

    this.$http
      .post("/auth/token", {
        token: token,
        userid: userid,
      })
      .then((res) => {
        console.log(res.data.state);
        // 如果不是通过后端进入网站
        if (!res.data.state) {
          this.showModal = true;
          this.$router.beforeEach((to, from, next) => {
            // 阻止路由跳转
            next(false);
          });
        }
      })
      .catch((error) => {
        alert("error");
        this.$router.beforeEach((to, from, next) => {
          // 阻止路由跳转
          next(false);
        });
      });
  },
  computed: mapState([
    // 映射 this.user 为 store.state.user
    "user",
  ]),
};
</script>
<style>
html,
body {
  margin: 0;
  padding: 0;
  /* 这将确保页面内容填满整个视口 */
}
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
main {
  flex: 1;
}

header {
  background-color: #007bff;
  color: white;
  padding: 10px 0;
  text-align: center;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10%;
}

nav .logo {
  font-size: 24px;
  font-weight: bold;
}

nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

nav ul li {
  margin: 0 10px;
}

nav ul li a,
.home-link {
  color: white;
  text-decoration: none;
  font-size: 18px;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
  margin-top: auto;
}

footer p {
  margin: 5px 0;
}

/* 媒体查询，针对小屏幕调整布局 */
@media screen and (max-width: 768px) {
  nav ul {
    flex-direction: column;
  }
}
.login-user {
  display: flex;
  flex-direction: column;
}
/* 弹窗样式 */
.modal-content {
  background-color: #fff;
  padding: 40px;
  border-radius: 10px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  box-shadow: 0 0 20px gainsboro;
}

/* 遮罩层样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998;
}
</style>


